<template>
    <el-card>
        <p slot="header">日志列表</p>
        <Table :columns="tableHead" :data="tableData" stripe border></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" :current="1" :page-size="pageSize" @on-change="queryPage"></Page>
            </div>
        </div>
    </el-card>
</template>
<script>
    import axios from '~plugins/axios';

    export default {
        layout: 'admin',
        head() {
            return {title: '日志列表'};
        },
        data() {
            return {
                userCols: [
                    {type: 'index', width: 60, align: 'center'},
                    {key: 'name', title: '名称', sortable: true},
                    {key: 'code', title: '编号', sortable: true},
                    {key: 'type', title: '类型', sortable: true}
                ],
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页条数
            };
        },
        asyncData() {
            return axios.get(`/api/log/page/0-10`).then(res => {
                return {
                    userData: res.data['content'], // 数据
                    total: res.data['totalElements'] // 总页数
                };
            });
        },
        methods: {
            queryUsers(page) {
                axios.get(`/api/log/page/${(--page)}-${this.pageSize}`).then(res => {
                    this.userData = res.data['content'];
                    this.total = res.data['totalElements'];
                });
            }
        }
    };
</script>